<template>
	<view class="content">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class="new-users skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<!-- 已登录 -->
			<view class="header" v-if="isLogin" @click="goEdit()">
				<view class="avatar skeleton-radius">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<image vv-else src="@/static/images/f.png" mode="aspectFill"></image>
				</view>
				<view class="user-info skeleton-rect">
					<view class="user-name">{{userInfo.nickname}}</view>
					<view class="num" v-if="userInfo.phone">
						<view class="num-txt">ID：{{userInfo.uid}}</view>
						<!-- <view class="icon">
							<image src="/static/images/edit.png" mode=""></image>
						</view> -->
					</view>
					<view class="phone" v-if="!userInfo.phone && isLogin" @click.stop="bindPhone">绑定手机号</view>
				</view>
			</view>
			<!-- 未登录 -->
			<view class="header" v-else>
				<view class="avatar skeleton-radius">
					<image src="/static/images/f.png" mode="aspectFill"></image>
				</view>
				<view class="user-name-unlogin" v-if="!userInfo.uid" @click="openAuto">
					请点击授权
				</view>
			</view>
			<!-- 收藏、关注 -->
			<view class="col-fol-box skeleton-rect">
				<view class="cf-item" v-for="(item,index) in colFols" @click="clickColFol(item)">
					<view class="num">{{item.num}}</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			<!-- 功能菜单区 -->
			<view class="fun-menus-box skeleton-rect">
				<view class="m-item" v-for="(item,index) in menus" @click="clickMenus(item)">
					<view class="icon">
						<image :src="item.img" mode="aspectFit"></image>
					</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			<!-- 列表1 -->
			<view class="bot-list-box skeleton-rect">
				<view class="l-item" v-for="(item,index) in botList1" @click="clickListItem(item)">
					<view class="left">
						<view class="icon">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="title">{{item.title}}</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
			<!-- 列表1 -->
			<view class="bot-list-box skeleton-rect">
				<view class="l-item" v-for="(item,index) in botList2" @click="clickListItem(item)">
					<view class="left">
						<view class="icon">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="title">{{item.title}}</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>

			<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
				:isGoIndex="false"></authorize>
			<!-- #ifndef H5 -->
			<passwordPopup></passwordPopup>
			<!-- #endif -->
		</view>

	</view>

</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import authorize from '@/components/Authorize';
	import {
		mapGetters
	} from "vuex";
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
		getCollectNums
	} from '@/api/inquiry.js'
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	export default {
		components: {
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'viewColor', 'keyColor']),
		},
		data() {
			return {
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				userInfo: {
					aratar: '/static/f.png'
				},

				colFols: [{
					'id': 0,
					'title': '收藏的内容',
					'num': '0',
					'url': '/pages/shops/subs_user/collection/index'
				}, {
					'id': 1,
					'title': '关注的医生',
					'num': '0',
					'url': '/pages/shops/subs_user/follow/index'
				}],
				menus: [{
						'id': 0,
						'title': '我的挂号',
						'img': HTTP_REQUEST_URL + '/uni_static/u/um_register.png',
						'url': '/pages/shops/subs_appointment/record/index'
					},
					{
						'id': 1,
						'title': '我的咨询',
						'img': HTTP_REQUEST_URL + '/uni_static/u/um_ask.png',
						'url': '/pages/shops/subs_inquiry/record/onlineList'
					},
					{
						'id': 2,
						'title': '我的问诊',
						'img': HTTP_REQUEST_URL + '/uni_static/u/um_inquiry.png',
						'url': '/pages/shops/subs_inquiry/record/picTextList'
					}
				],
				botList1: [{
						'id': 0,
						'title': '在线客服',
						'img': HTTP_REQUEST_URL + '/uni_static/u/ul_server.png',
						'url': '/pages/chat/customer_list/chat?mer_id=0'
					},
					{
						'id': 1,
						'title': '健康档案',
						'img': HTTP_REQUEST_URL + '/uni_static/u/ul_healthy.png',
						'url': '/pages/shops/subs_inquiry/patients/list'
					}
				],
				botList2: [
					// {
					// 	'id': 0,
					// 	'title': '我的在线处方',
					// 	'img': HTTP_REQUEST_URL + '/uni_static/u/ul_online.png',
					// 	'url': ''
					// },
					{
						'id': 1,
						'title': '设置',
						'img': HTTP_REQUEST_URL + '/uni_static/u/ul_set.png',
						'url': '/pages/users/user_setting/index'
					}
				],
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showSkeleton = false
			}, 500)
		},
		onReady() {
			this.isNodes++;
		},
		onShow: function() {
			//console.log('rk==>[show]' + this.isLogin)
			if (this.isLogin) {
				this.getUsersInfo();
				this.getCollectNums();
			} else {
				this.userInfo = {}
			}
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				console.log('rk==>[授权]' + this.isLogin)
				this.getUsersInfo();
				this.isShowAuth = false
			},
			/**
			 * 获取个人用户信息
			 */
			getUsersInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
				}).catch(err => {
					console.log('rk==>[err]' + JSON.stringify(err));
				});
			},
			/**
			 * 获取关注、收藏数量
			 */
			getCollectNums() {
				let where = {
					'uid': this.uid
				}
				getCollectNums(where).then(res => {
					this.colFols[0].num = res.data.collect_count;
					this.colFols[1].num = res.data.follow_count;
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				} else {
					this.openAuto()
				}
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/user_phone/index'
				})
			},
			/**
			 * 关注-收藏
			 */
			clickColFol(item) {
				console.log('rk==>[col-fol]' + JSON.stringify(item.id));
				if (!item.url || item.url.length <= 0) {
					return this.$util.Tips({
						title: '链接不合法'
					});
				}

				if (!this.isLogin) {
					this.openAuto()
					return
				}
				uni.navigateTo({
					url: item.url
				})
			},
			/**
			 * 菜单
			 */
			clickMenus(item) {
				if (!this.isLogin) {
					this.openAuto()
					return
				}
				uni.navigateTo({
					url: item.url
				})
			},
			/**
			 * 列表点击
			 */
			clickListItem(item) {
				if (!this.isLogin) {
					this.openAuto()
					return
				}
				if (!item.url || item.url.length <= 0) {
					return this.$util.Tips({
						title: '链接不合法'
					});
				}

				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {}

	.new-users {
		padding: 30rpx;

		.header {
			display: flex;
			margin: 10rpx 0 40rpx;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				overflow: hidden;
				border-radius: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-left: 20rpx;

				.user-name {
					font-size: $yy-title-big-font;
					font-weight: bold;
				}

				.num {
					.num-txt {}
				}
			}

			.user-name-unlogin {
				font-size: $yy-title-big-font;
				font-weight: bold;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
			}
		}

		.col-fol-box {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			width: 100%;

			.cf-item {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $yy-title-font;

				.num {
					font-weight: bold;
					margin-bottom: 10rpx;
				}

			}
		}

		.fun-menus-box {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 0;
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			.m-item {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $yy-title-font;
			}

			.icon {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bot-list-box {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0rpx 0 30rpx;
			padding: 10rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;

			.l-item {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.left {
				display: flex;
				align-items: center;
			}

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
